<template>
  <div>
    <div>
      <el-form v-model="filterData" label-width="80px">
        <el-row :gutter="20">
          <el-col style="width: 240px;">
            <el-form-item label="姓名:" >
              <el-input v-model="filterData.name" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 240px;">
            <el-form-item label="联系电话:" >
              <el-input v-model="filterData.mobile" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 240px;">
            <el-form-item label="身份证号:" >
              <el-input v-model="filterData.idcardcode" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 240px;">
            <el-form-item label="" label-width="0">
              <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin: 5px 0px;"><el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增员工</el-button></div>
    <div style="border-top: 1px solid #F4F4F4; calc(100vh -200px)">
      <el-table :data="tableData" border style="height: 100%;">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="姓名" prop="name" width="100px" align="center"></el-table-column>
        <el-table-column label="性别" prop="sex" width="50px" align="center">
          <template v-slot="scope">
            <span v-if="scope.row.sex==1">男</span>
            <span v-if="scope.row.sex==2">女</span>
          </template>
        </el-table-column>
        <el-table-column label="出生日期" prop="birth" width="100px" align="center"></el-table-column>
        <el-table-column label="身份证号" prop="idcardcode"></el-table-column>
        <el-table-column label="手机号" prop="mobile"></el-table-column>
        <el-table-column label="文化水平" prop="wenhua" width="90px" align="center"></el-table-column>
        <el-table-column label="入职时间" prop="joindate" width="100px" align="center"></el-table-column>
        <el-table-column label="联系地址" prop="address" show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="memo" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100px" align="center">
          <template v-slot="scope">
            <el-button-group>
              <el-button icon="el-icon-edit" circle @click="handleEdit(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-delete" circle type="danger" @click="handleDelete(scope.$index,scope.row)">
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top: 10px; text-align: right;">
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager, next,sizes,total" :page-sizes="[20, 40, 80]" :total="total" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <CreateUI ref="createUI" v-if="createVisible" @closeHandler="handleCreateCallback"></CreateUI>
    <EditUI ref="editUI" v-if="editVisible" @updated="handleEditCallback"></EditUI>
  </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './edit.vue';
  export default {
    components: {
      CreateUI,
      EditUI
    },
    data() {
      return {
        tableData: [],
        filterData: {
          name: '',
          idcardcode: '',
          mobile: '',
        },
        curpage: 1,
        pagesize: 20,
        total: 1,
        createVisible: false,
        editVisible:false,
      }
    },
    created() {
      this.loadDataList();
    },
    methods: {
      loadDataList() {
        const params = {
          name: this.filterData.name,
          curpage: this.curpage,
          mobile: this.filterData.mobile,
          idcardcode:this.filterData.idcardcode,
          pagesize: this.pagesize
        }
        this.axios.post("api/admin/mate/list", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.curpage = res.data.curpage;
            this.pagesize = res.data.pagesize;
            this.total = parseInt(res.data.total);
          }
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleSearch(){
        this.curpage=1;
        this.loadDataList();
      },
      handleCreate: function() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
        })
      },
      handleEdit(index, row) {
          this.editVisible=true;
          this.$nextTick(()=>{
              this.$refs.editUI.dialogVisible=true;
              this.$refs.editUI.init(index,JSON.parse(JSON.stringify(row)));
          })
      },
      handleEditCallback(index,data){
        this.tableData[index].name=data.name;
        this.tableData[index].sex=data.sex;
        this.tableData[index].birth=data.birth;
        this.tableData[index].idcardcode=data.idcardcode;
        this.tableData[index].mobile=data.mobile;
        this.tableData[index].wenhua=data.wenhua;
        this.tableData[index].joindate=data.joindate;
        this.tableData[index].overdate=data.overdate;
        this.tableData[index].salery=data.salery;
        this.tableData[index].address=data.address;
        this.tableData[index].memo=data.memo;
      },
      handleDelete(index, row) {
        this.$confirm("确定要删除此员工的信息吗?","提示",{
          confirmButtonText:"删除",
          cancelButtonText:'取消',
          type:'error'
        }).then(res=>{
          const params={
            id:row.id
          }
          this.axios.post("api/admin/mate/delete",params).then((res)=>{
            if(res.status==200 && res.data.code==0){
               this.$message.success({message:res.data.msg,duration:1500,showClose:true});
               this.loadDataList();
            }else{
              this.$message.error({message:res.data.msg,duration:1500,showClose:true});
            }
          })

        }).catch(err=>{})


      },
      handleCreateCallback(){
          this.curpage=1;
          this.loadDataList();
      }
    }
  }
</script>

<style>
</style>
